<template>
  <div class="data-lister">
    <ul v-if="dataArr.length">
      <li v-for="({ id, text }, index) in dataArr" :key="id">
        <span>{{ text }}</span>

        <button @click="onBtnDeleteClick(id)">删除</button>
      </li>
    </ul>

    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script setup>
const { dataArr } = defineProps(["dataArr"]);
const emit = defineEmits(["itemDeleteBtnClick"]);

const onBtnDeleteClick = (id) => {
  emit("itemDeleteBtnClick", id);
};
</script>

<style lang="scss" scoped>
.data-lister {
  margin-top: 10px;

  ul {
    li {
      height: 35px;
      line-height: 35px;
      border-bottom: 1px solid #eee;
      display: flex;
      padding: 2px 0 2px 5px;

      span {
        flex: 1;
      }

      button {
        width: 100px;
        height: 100%;
      }
    }

    li.done {
      span {
        text-decoration: line-through;
      }
    }
  }

  .no-data {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #ccc;
    border: 1px solid #eee;
    border-radius: 5px;
  }
}
</style>
